import Head from 'next/head'
import Layout from '../../components/layouts/default'
import utilStyles from '../../styles/utils.module.css'
import { makeStyles } from '@material-ui/core/styles';
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import remark from 'remark'
import html from 'remark-html'

const prefix = '/boboan.github.io'

const useStyles = makeStyles(({ breakpoints, spacing, palette }) => ({
    mobile: {
        background: `url(${prefix}/images/mobile.jpeg)`,
        backgroundRepeat: 'no-repeat',
        height: '812px',
        width: '375px',
        backgroundPosition: '-100px center',
        position: 'fixed',
        right: '110px'
    },
    iframe: {
        height: '560px',
        width: '316px',
        position: 'absolute',
        top: '121px',
        left: '30px',
        border: 'none'
    }
}))

export default function ({ html }) {
    const classes = useStyles()
    return (
        <Layout>
            <Head>
                <title>boboan</title>
            </Head>
            <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
                {/* 左边例子 */}
                <div className={classes.mobile}>
                    <iframe className={classes.iframe} src="https://ranmeizi.github.io/realword-front.github.io"></iframe>
                </div>
                {/* 右边介绍 */}
                <div className='note-view' dangerouslySetInnerHTML={{ __html: html }} />
            </section>
        </Layout>
    )
}

export async function getStaticProps({ params }) {
    const matterResult = matter(fs.readFileSync(path.join(process.cwd(), 'pages/demos/rvt.md'), 'utf8'))
    const processedContent = await remark()
        .use(html)
        .process(matterResult.content)
    return {
        props: {
            html: processedContent.toString()
        }
    }
}